import PaginationBar from "../../components/paginationbar";
import React, {useEffect, useState} from 'react'
import {Breadcrumb, Button, Col,Select , Form, Input, Modal, Pagination, Row, Space,} from 'antd'
import common from "../../common"
import Table from "antd/es/table"
import {SafetyOutlined} from "@ant-design/icons";
import Toolbar from "../../components/toolbar";

/**
 *
 id:props.match.params.id,
 */
function Buttons(props) {
    let initSearch = {}
    let [dataList, setDataList] = useState([])
    let [events, setEvent] = useState([])
    let [category, setCategory] = useState({name:1})

    const [searchForm] = Form.useForm();
    let [pagination, setPagination] = useState({
        total: 0,
        page: 1,
        limit: 10,
    })
    const {Option} = Select;

    let [createModalVisible, setCreateModalVisible] = useState(false)
    let [editModalVisible, setEditModalVisible] = useState(false)
    let [createForm] = Form.useForm();
    let [editForm] = Form.useForm();
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
        },
        {
            title: '键位',
            dataIndex: 'key',
        },
        {
            title: '事件',
            dataIndex: 'eventName',
        },
        {
            title: '操作',
            align: "center",
            width: 160,
            fixed: "right",
            render: (text, record, index) => {
                return (
                    <>
                        <Button type="link" onClick={() => {
                            setEditModalVisible(true)
                            editForm.setFieldsValue(record)
                        }}>编辑</Button>
                        <Button type="link" onClick={() => {
                            common.confirm("确定要删除吗?", () => {
                                del(record.id)
                            })
                        }}>删除</Button>
                    </>
                )
            }
        }
    ];

    // 获取按钮列表
    const getButtons = () => {
        let params = {
            categoryId:props.match.params.id,
            page: pagination.page,
            limit: pagination.limit,
        }
        common.ajax("GET", "/front/button/list", params).then(data => {
            setDataList(data.list)
            setPagination(data.pagination)
        })
    }

    const getEvent = () => {

        common.ajax("GET", "/front/event/list?limit=100").then(data => {
            setEvent(data.list)
        })
    }

    const getCategory = () => {
        let date = {
            id:props.match.params.id,
        }
        common.ajax("GET", "/front/category/list?limit=100",date).then(data => {
            setCategory(data.list[0])
        })
    }

    const create = (data) => {

        common.loadingStart()
        common.ajax("POST", "/front/button/create", data).then(res => {
            common.toast("操作成功")
            setCreateModalVisible(false)
            getButtons()
        }).finally(common.loadingStop)
    }

    const update = (data) => {
        common.loadingStart()
        common.ajax("POST", "/front/button/update", data).then(res => {
            common.toast("操作成功")
            setEditModalVisible(false)
            getButtons()
        }).finally(common.loadingStop)
    }

    const del = (id) => {
        common.loadingStart()
        common.ajax("POST", "/front/button/delete", {id}).then(res => {
            common.toast("操作成功")
            getButtons()
        }).finally(common.loadingStop)
    }

    useEffect(() => {
        getButtons()
        getEvent()
        getCategory()
    }, [pagination.page, pagination.limit])

    return (
        <div className="Button">
            <Breadcrumb>
                <Breadcrumb.Item>设备管理</Breadcrumb.Item>
                <Breadcrumb.Item>盒子类型管理</Breadcrumb.Item>
                <Breadcrumb.Item>{category.name}</Breadcrumb.Item>
            </Breadcrumb>
            <div style={{padding: 24, minHeight: 600}}>
                <Toolbar>
                <div>
                    <Button type="primary" onClick={() => {
                        setCreateModalVisible(true)
                        createForm.setFieldsValue({title: ""})

                    }}>新增</Button>
                    <> </>
                    <Button type="primary" onClick={() => {
                        props.history.push('/category')
                    }}>返回</Button>
                </div>
                </Toolbar>

                <Table rowKey={columns => columns.id} dataSource={dataList} columns={columns} pagination={false}/>
                {pagination.total < 5 ? '' :
                    <PaginationBar>
                        <Pagination
                            style={{marginTop: 25}}
                            pageSizeOptions={['10', '20', '50', '100']}
                            onChange={(page, limit) => {
                                setPagination({...pagination, page, limit})
                            }}
                            onShowSizeChange={(page, limit) => {
                                setPagination({...pagination, page, limit})
                            }}
                            showTotal={total => `共${total}条`}
                            total={pagination.total}
                            defaultCurrent={pagination.page}
                            current={pagination.page}
                            defaultPageSize={pagination.limit}
                            showSizeChanger
                            showQuickJumper
                        /></PaginationBar>}
            </div>

            <Modal title="新增" destroyOnClose={true} footer={false} maskClosable={false} visible={createModalVisible}
                   onCancel={() => {
                       setCreateModalVisible(false)
                   }}
            >
                <Form preserve={false}
                      labelCol={{span: 8}}
                      wrapperCol={{span: 16}}
                      form={createForm}
                      onFinish={(values) => {
                          values={...values,categoryId:props.match.params.id}
                          create(values)
                      }}
                >
                    <Form.Item
                        label="键位"
                        name="key"
                        rules={[{required: true, message: '请输入键位'}]}
                    >
                        <Input type="number"/>
                    </Form.Item>
                    <Form.Item
                        label="事件名称"
                        name="eventId"
                        rules={[{required: true, message: '请输入事件名称'}]}
                    >
                        <Select  placeholder="userName" >
                            {events.map(item => {
                                return (<Option key={item.id} value={item.id} > {item.name}</Option>)
                            })}
                        </Select>
                    </Form.Item>
                    <Form.Item wrapperCol={{offset: 8, span: 16}}>
                        <Button type="primary" htmlType="submit">
                            保存
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>

            <Modal title="编辑" footer={false} maskClosable={false} visible={editModalVisible} onCancel={() => {
                setEditModalVisible(false)
            }}
            >
                <Form
                    labelCol={{span: 8}}
                    wrapperCol={{span: 16}}
                    form={editForm}
                    onFinish={(values) => {
                        values={...values,categoryId:props.match.params.id}
                        update(values)
                    }}
                >
                    <Form.Item
                        hidden={true}
                        name="id"
                    >
                        <Input/>
                    </Form.Item>
                    <Form.Item
                        label="键位"
                        name="key"
                        rules={[{required: true, message: '请输入键位'}]}
                    >
                        <Input type="number"/>
                    </Form.Item>
                    <Form.Item
                        label="事件名称"
                        name="eventId"
                        rules={[{required: true, message: '请输入事件名称'}]}
                    >
                        <Select  placeholder="userName" >
                            {events.map(item => {
                                return (<Option key={item.id} value={item.id} > {item.name}</Option>)
                            })}
                        </Select>
                    </Form.Item>

                    <Form.Item wrapperCol={{offset: 8, span: 16}}>
                        <Button type="primary" htmlType="submit">
                            保存
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>

        </div>
    );
}

export default Buttons
